<template>
  <el-col :span="12" style="height: 100%; width: 100%">
    <el-menu
      :default-active="activeMenu"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      router
    >
      <!-- 卡片管理 -->
      <el-menu-item
        v-if="hasPermission('view_cardManagementView')"
        index="/CardManagementView"
        :route="{ path: '/CardManagementView' }"
      >
        <i class="el-icon-s-finance"></i>
        <span slot="title">卡片管理</span>
      </el-menu-item>

      <!-- 账号管理 -->
      <el-menu-item
        v-if="hasPermission('view_accountManagementView')"
        index="/AccountManagementView"
        :route="{ path: '/AccountManagementView' }"
      >
        <i class="el-icon-s-shop"></i>
        <span slot="title">账号管理</span>
      </el-menu-item>

      <!-- 宣传管理 -->
      <el-menu-item
        v-if="hasPermission('view_publicizeManagementView')"
        index="/PublicizeManagementView"
        :route="{ path: '/PublicizeManagementView' }"
      >
        <i class="el-icon-share"></i>
        <span slot="title">宣传管理</span>
      </el-menu-item>
    </el-menu>
  </el-col>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "SidebarComponent",
  data() {
    return {
      activeMenu: this.$route.path, // 当前活动菜单项为当前路由路径
    };
  },
  computed: {
    // 从 Vuex 中获取权限列表
    ...mapGetters({
      permissions: "user/permissions", // 假设 Vuex 的权限存储在 user 模块中
    }),
  },
  watch: {
    $route(to) {
      this.activeMenu = to.path; // 路由变化时，更新活动菜单项
    },
  },
  methods: {
    // 检查是否有某项权限
    hasPermission(permission) {
      return this.permissions.includes(permission);
    },
    handleOpen(key, keyPath) {
      console.log("open", key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log("close", key, keyPath);
    },
  },
};
</script>

<style scoped>
.el-menu-vertical-demo {
  width: 100%;
  height: 100%;
  background-color: #fafafa;
}
</style>
